<template>
<div>
  <table>
    <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>年龄</td>
      <td>班级</td>
    </tr>
    <tr v-for="student in studentlist" :key="student.id">
      <td>{{student.id}}</td>
      <td><button @click="toStudentDetail(student.id)">{{student.name}}</button></td>
      <td>{{student.age}}</td>
      <td>{{student.grade}}</td>
    </tr>
  </table>
</div>
</template>

<script>
  export default {
    name: "Studentlist",
    data() {
      return {
        studentlist: [],
        grade_id: ''
      }
    },
    methods: {
      toStudentDetail(student_id){
        this.$router.push({
          name:'Studentdetail',
          query:{
            student_id:student_id
          }
        })
      },
      getStudent() {
        this.$axios.get('/app01/student/?grade_id=' + this.grade_id)
          .then(res => {
            console.log(res.data)
              this.studentlist=res.data
            })
          }
      },
      created() {
          this.grade_id=this.$route.query.grade_id
        this.getStudent()

      }
    }
</script>

<style scoped>

</style>
